<!DOCTYPE html>
<html>
	<head>
		<title>Map Tiles Downloader</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- TODO replace jquery with react -->
		<script src="jquery.min.js"></script>

		<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
		<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />

		<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js"></script>
		<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
		<script src="mapbox-gl-draw-rectangle-mode.min.js"></script>
		<link
			rel="stylesheet"
			href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
			type="text/css"
		/>
		<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js"></script>

		<!-- <script src='https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js'></script> -->
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/progressbar.js/1.1.0/progressbar.min.js"></script>

		<script src="async.min.js"></script>
		<script src="turf.min.js"></script>

		<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet">  -->
		<script src="materialize/js/materialize.min.js"></script>
		<link href="materialize/css/materialize.min.css" rel="stylesheet" type="text/css" />

		<script src="main.js"></script>
		<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="max-height">
			<div id="map-view"></div>

			<div id="main-title">Map Tiles Downloader</div>
		</div>

		<div class="sidebar" id="main-sidebar">
			<div class="step-number">1</div>
			<div class="step-title">搜索地点</div>

			<form id="search-form" class="sidebar-section row">
				<div class="input-field col s12">
					<input id="location-box" type="text" value="上海" />
					<label for="location-box">输入一个位置(回车)</label>
				</div>
			</form>

			<div class="step-number">2</div>
			<div class="step-title">选择一个范围</div>

			<div class="center-align sidebar-section">
				<p>
					<a class="waves-effect waves-light z-depth-0 btn-small orange darken-3" id="rectangle-draw-button"
						>画一个矩形</a
					>
				</p>
			</div>

			<div class="step-number">3</div>
			<div class="step-title">配置</div>

			<div class="sidebar-section">
				<div class="row">
					<div class="input-field col s6">
						<input id="zoom-from-box" type="text" value="15" />
						<label for="zoom-from-box" class="active">开始Zoom:</label>
					</div>
					<div class="input-field col s6">
						<input id="zoom-to-box" type="text" value="15" />
						<label for="zoom-to-box" class="active">结束Zoom:</label>
					</div>
				</div>

				<div class="row">
					<div class="input-field col s10">
						<input
							id="source-box"
							type="text"
							value="http://ecn.t0.tiles.virtualearth.net/tiles/a{quad}.jpeg?g=129&mkt=en&stl=H"
						/>
						<label for="source-box">地图瓦片资源</label>
					</div>
					<div class="input-field col s2">
						<a
							class="waves-effect waves-light btn-small blue-grey lighten-2 z-depth-0 dropdown-trigger"
							id="source-select"
							href="#"
							data-target="sources"
							>⯆</a
						>

						<ul id="sources" class="dropdown-content"></ul>
					</div>
				</div>

				<div class="center-align">
					<a class="waves-effect waves-light z-depth-0 btn-small orange darken-3" id="grid-preview-button"
						>预览网格</a
					>
				</div>
			</div>

			<div class="step-number">4</div>
			<div class="step-title">
				<a href="javascript:void(0)" id="more-options-toggle">更多配置 (+)</a>
			</div>

			<div style="display: none" id="more-options" class="sidebar-section row">
				<!-- <div class="input-field col s12">
				<select id="output-scale" type="text">
					<option value="1">1x</option>
					<option value="2">2x</option>
				</select>
				<label for="output-scale">Output scale</label>
			</div> -->

				<!-- <div class="input-field col s12">
				<input id="output-directory-box" type="text" value="{timestamp}">
				<label for="output-directory-box">Output directory</label>
			</div> -->

				<!-- <div class="input-field col s12">
				<select id="output-type" type="text">
					<option value="directory">Directory</option>
					<option value="mbtiles">Mbtiles</option>
					<option value="repo">Repo</option>
				</select>
				<label for="output-type">Output type</label>
			</div> -->

				<div class="input-field col s12">
					<input id="output-file-box" type="text" value="{z}/{x}/{y}.png" />
					<label for="output-file-box">输出文件路径</label>
				</div>

				<div class="input-field col s12">
					<select id="request-type" type="text">
						<option value="yes">是</option>
						<option value="no">否</option>
					</select>
					<label for="request-type">是否使用gzip压缩请求</label>
				</div>

				<!-- <div class="input-field col s12">
				<input id="parallel-threads-box" type="text" value="4">
				<label for="parallel-threads-box">下载线程数</label>
			</div> -->
			</div>

			<button
				class="waves-effect waves-light z-depth-0 btn-large cyan darken-2 bottom-button"
				id="download-button"
			>
				下载
			</button>
		</div>

		<div class="sidebar" id="download-sidebar" style="display: none">
			<div class="step-number">5</div>
			<div class="step-title">下载瓦片中</div>
			<div class="hints sidebar-section">请等待...</div>

			<div class="sidebar-section">
				<div id="progress-radial" class=""></div>

				<p id="progress-subtitle" class=""></p>

				<p class="tile-strip"></p>
			</div>

			<textarea id="log-view" class="sidebar-section"></textarea>

			<button class="waves-effect waves-light z-depth-0 btn-large red lighten-5 bottom-button" id="stop-button">
				停止
			</button>
		</div>
	</body>
</html>
